<template>
	<view class="detail-container" v-if="item">
		<swiper class="swiper" :style="{ height: swiperheight  }" circular :indicator-dots="false" :autoplay="false"
			:interval="3000" :duration="500">
			<swiper-item v-for="v in item.img">
				<image :src="v" style="width:100%;height:100%;display:inherit;">
			</swiper-item>
		</swiper>

		<view class="info">
			<view class="price-box">
				<view class="price"><text style="font-size:24upx">￥</text>{{item.price}}</view>
				<view class="cert">{{item.sales_volume}}已售</view>
			</view>
			<view class="title">{{item.title}}</view>
			<view class="serve-box">
				<view class="item border-bottom">
					<view class="item-title">发货</view>
					<view class="item-content">
						<view>快递包邮</view>
						<view style="font-size: 24upx;color: #999;">付款后48小时发货</view>
					</view>
				</view>

				<view class="item border-bottom">
					<view class="item-title">保障</view>
					<view class="item-content">
						破损包退&nbsp;&nbsp;·&nbsp;&nbsp;假一赔三
					</view>
				</view>

				<view class="item " @click="toggle()">
					<view class="item-title">规格</view>
					<view class="item-content">
						{{select_item==null?'请选择规格':select_item.title+'【'+select_num+'】份'}}
					</view>
					<view>></view>
				</view>
			</view>

			<view class="material">
				<view class="item">
					<i class="fa fa-star-half-o fa-lg"></i>
					<view style="margin-top:10upx">年份</view>
					<view style="margin-top:10upx;color:#333">{{item.year}}</view>
				</view>
				<view class="item">
					<i class="fa fa-modx fa-lg"></i>
					<view style="margin-top:10upx">产地</view>
					<view style="margin-top:10upx;color:#333">{{item.area}}</view>
				</view>
				<view class="item">
					<i class="fa fa-database fa-lg"></i>
					<view style="margin-top:10upx">等级</view>
					<view style="margin-top:10upx;color:#333">{{item.level}}</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title">
				<view class="title">本店推荐</view>
			</view>
			<view class="box-content">
				<view class="item" v-for="item1 in item.recommend " @click="handleRecommend(item1.id)">
					<image mode="widthFix" :src="item1.head"></image>
					<view class="title">{{item1.title}}</view>
					<view class="price"><text style="font-size:24upx">￥</text>{{item1.price}}</view>
				</view>
			</view>
		</view>

		<view class="box" style="padding-bottom: 200upx;">
			<view class="box-title">
				<view class="title">商品详情</view>
			</view>
			<image v-for="item1 in item.detail_img" style="width: 100%;" mode="widthFix" :src="item1"></image>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<scroll-view scroll-y class="popup-content">
				<view class="popup-content_title">
					<view>
						<image style="height: 120upx;" mode="heightFix" :src="select_item.head"
							v-if="select_item && select_item.head!==''"></image>
						<image style="height:120upx;" mode="heightFix" :src="item.head" v-else></image>
					</view>
					<view class="price-box">
						<view class="price">
							<view><text style="font-size:20upx">￥</text><text
									style="font-size:40upx">{{select_item==null?item.price:select_item.price}}</text>
							</view>
						</view>
						<view class="price-select-box">
							<view class="number-btn" @click="reduceNum()">-</view>
							<view style="width:40px;text-align:center">{{select_num}}</view>
							<view class="number-btn" @click="increaseNum()">+</view>
						</view>
					</view>
				</view>
				<view class="popup-content_item">
					<view style="padding: 10upx 0;">规格</view>
					<scroll-view scroll-y="true" style="height: 400upx;">
						<view class="item" :class="v.id==select_item.id?'active':''" v-for="v in item.with_norm"
							@click="selectItem(v)">
							<view>
								<image style="height: 60upx;width:60upx;" :src="v.head"></image>
							</view>
							<view class="c">{{v.title}}</view>
							<view>{{v.price}}</view>
						</view>
					</scroll-view>

				</view>

				<view class="popup-content_button">
					<view class="button" @click="orderClick">立即支付</view>
				</view>
			</scroll-view>
		</uni-popup>
		<goodsNav ref="goods" :item="select_item" :num="select_num" @openPopup="toggle"></goodsNav>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup1" type="bottom" background-color="#fff">
			<scroll-view scroll-y class="cart-model">
				<cartModel ref="cartModel" />
			</scroll-view>
		</uni-popup>

		<loadingModel ref="loading" />
	</view>
</template>

<script>
	import loadingModel from '@/components/loading-model/loading-model.vue';
	import cartModel from '@/components/cart-model/cart-model.vue';
	import goodsNav from '@/components/goods-nav/goods-nav.vue';
	export default {
		components: {
			cartModel,
			goodsNav,

			loadingModel
		},
		data() {
			return {
				swiperheight: "0px",
				select_item: null,
				select_num: 1,
				item: null,
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		onLoad() {
			let product_id = this.$Route.query.product_id
			this.getProductRead(product_id)

		},
		methods: {
			orderClick() {
				let bags = [];
				bags.push({
					"price": this.select_item.price,
					"head": this.select_item.head,
					"num": this.select_num,
					"product_title": this.item.title,
					"product_id": this.item.id,
					"product_norm_title": this.select_item.title,
					"product_norm_id": this.select_item.id,
				})
				this.$store.commit('setBags', bags);
				this.$Router.push({
					path: '/pages/balance/balance'
				})
			},
			reduceNum() {
				if (this.select_num > this.select_item.min_order) {
					this.select_num = this.select_num - 1
				}
			},
			increaseNum() {
				if (this.select_num < this.select_item.max_order) {
					this.select_num = this.select_num + 1
				}
			},
			navButtonClick(e) {
				//如果还没选择规格就打开让他选
				if (this.select_item == null) {
					this.toggle()
					return false
				}

				if (this.select_num == null) {
					this.toggle()
					return false
				}
				if (e.index == 0) {
					//加入购物车
					this.$myRequest('cart/add', {
						product_id: this.item.id,
						product_norm_id: this.select_item.id,
						num: this.select_num
					}, "POST").then((res) => {
						if (res.code == 1000) {
							let user_info = this.$store.state.user_info
							user_info.cart_num = res.data.data
							this.$store.commit('setUserInfo', user_info)
							this.select_item = null;
							this.select_num = 1;
							this.$refs.popup.close()
						} else {
							uni.showToast({
								title: '加入购物车失败',
								icon: 'error'
							})
						}
					})
				} else {

				}
			},
			selectItem(v) {

				this.select_num = v.min_order
				this.select_item = v
				this.select_item.product_id = this.item.id
				this.select_item.product_title = this.item.title
			},
			getProductRead(id) {
				this.$myRequest('product/read', {
					id: id
				}).then((res) => {
					if (res.code == 1000) {
						let that = this
						this.item = res.data
						this.item.with_norm.forEach(function(v, index) {
							if (index == 0) {
								that.selectItem(v)
							}
						})
						if (res.data.img.length > 0) {
							this.getswiperImageInfo(res.data.img[0])
						}
						this.$nextTick(function() {
							this.$refs.loading.close()
						});
					}
				})
			},

			getswiperImageInfo(src) {
				uni.getImageInfo({
					src: src,
					success: (res) => {
						let endwidth = res.width / res.height
						this.swiperheight = 100 / endwidth + "vw"
					},
					fail: (err) => {}
				});
			},
			toggle() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			handleRecommend(id) {
				this.$Router.push({
					path: '/pages/detail/detail',
					query: {
						product_id: id
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.cart-model {
		height: 800upx;
	}

	.detail-container {
		.info {
			background: #fff;
			padding: 20upx;
			padding-bottom: 40upx;
			padding-top: 40upx;

			.price-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30upx;

				.price {
					font-size: 44upx;
					color: $uni-color-error;
					font-weight: 700;
				}

				.cert {
					font-size: 28upx;
					color: #999;
				}
			}

			.title {
				margin-top: 40upx;
				font-size: 36upx;
				padding-bottom: 50upx;
			}

			.material {
				display: flex;
				background: #f5f5f5;
				margin-top: 20upx;
				padding: 30upx;
				border-radius: 10upx;

				.item {
					color: #999;
					font-size: 26upx;
					text-align: center;
					flex: 1;

					i {
						color: #777;
					}
				}
			}

			.serve-box {
				border-radius: 10upx;
				background-color: #f5f5f5;
				padding: 0 30upx;

				.border-bottom {
					border-bottom: 1px solid #eeeeee;
				}

				.item {
					padding: 30upx 0;
					display: flex;
					font-size: 28upx;

					.item-title {
						width: 80upx;
						color: #999;
					}

					.item-content {
						flex: 1;
					}
				}
			}
		}

		.box {
			margin-top: 20upx;
			margin-bottom: 40upx;
			background: #fff;

			.box-title {
				padding: 20upx;
				display: flex;

				.title {
					font-size: 32upx;
					font-weight: 600;
				}
			}

			image {
				display: block;
				vertical-align: middle;
			}

			.box-content {
				padding: 10upx;
				display: flex;

				.item {
					padding: 10upx;
					width: 33.3333%;

					image {
						border-radius: 10upx;
						width: 100%;
					}

					.title {
						margin-top: 10upx;
						font-size: 28upx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.price {
						margin-top: 10upx;
						color: $uni-color-error;
						font-size: 700;
					}
				}
			}
		}

		.popup-content {
			height: 800upx;
			width: 100%;
			padding: 30upx;
			position: relative;
			box-sizing: border-box;

			.popup-content_title {
				display: flex;

				.price-box {
					display: flex;
					flex-flow: column;
					justify-content: space-between;
					padding-left: 30upx;

					.price {
						font-weight: 700;
						color: $uni-color-error;
					}

					.price-select-box {
						display: flex;
						align-items: center;

						.number-btn {
							font-size: 32upx;
							height: 25px;
							line-height: 25px;
							padding: 0 26upx;
							border-radius: 10upx;
							background-color: #f3efef;
						}
					}
				}

				image {
					display: block;
					vertical-align: middle;
				}
			}

			.popup-content_item {
				padding: 30upx 0;

				.item {
					border: 1px solid #f9f9f9;
					background-color: #f9f9f9;
					display: flex;
					align-items: center;
					margin: 20upx 0;
					padding: 10upx 30upx 10upx 30upx;
					margin-top: 20upx;
					border-radius: 20upx;

					.c {
						font-size: 28upx;
						padding-left: 20upx;
						padding-right: 20upx;
						flex: 1;
					}
				}

				.active {
					background-color: #faf0ec;
					color: $uni-color-error !important;
					border: 1px solid $uni-color-error !important;
				}
			}

			.popup-content_number {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.popup-content_button {
				position: fixed;
				width: calc(100% - 60upx);
				box-sizing: border-box;
				bottom: 50upx;

				.button {
					font-size: 32upx;
					text-align: center;
					border-radius: 10upx;
					padding: 30upx 40upx;
					color: #fff;
					background-color: $uni-color-green;
				}
			}
		}
	}
</style>